<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" style="background-color: pink">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>宠爱商城</title>

    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}" >
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">

    <style>
        input::-webkit-input-placeholder{
            color:black;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:black;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:black;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color:black;
        }

        #buttoncss{
            border-radius: 2px;
            color: black;
        }

    </style>


</head>

<body>

<!-- Header Section Start -->
<div class="header section" th:replace="~{common/head::head}"></div>


<!-- Breadcrumb Area Start -->
<!--查询q-->
<div class="section"  style="height: 180px; background: #F2F2F2">

    <div class="container" style="margin-top: 30px">
        <div class="row">
            <div class="col-12" >
                <span style="font-family: 微软雅黑; font-size: 18px; color: #6bbabe">
                            商品名称:&nbsp;&nbsp;&nbsp;
                    </span>
                <input style="border-radius: 8px; border-width: 1px; width: 150px" type="text" id="goodsName" name="goodsName" placeholder="请输入...">
            </div>
            <div class="col-12" style="margin-top: 10px">
                <div>
                    <div style="float: left; width: 190px">
                        <span style="font-family: 微软雅黑; font-size: 18px; color: #6bbabe">
                            商品分类:&nbsp;&nbsp;&nbsp;
                        </span>
                        <select id="firstid" style="border-radius: 5px;height: 30px">
                            <option value="">萌宠类型</option>
                            <option value="狗">狗</option>
                            <option value="猫">猫</option>
                        </select>
                    </div>
                    <div style="float: left; left: 150px">
                        <select id="secondid" style="border-radius: 5px; height: 30px">
                            <option value="">商品类型</option>
                            <option value="宠物食品">宠物食品</option>
                            <option value="宠物衣物">宠物衣物</option>
                            <option value="宠物玩具">宠物玩具</option>
                        </select>
                        <select id="goodtype" style="border-radius: 5px; height: 30px">
                            <option value="">品牌名</option>
                            <option value="优朗">优朗</option>
                            <option value="麦富迪">麦富迪</option>
                            <option value="比瑞吉">比瑞吉</option>
                            <option value="皇家">皇家</option>
                            <option value="小安心">小安心</option>
                            <option value="波奇">波奇</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-12" style="margin-top: 10px;display: none">
                <div>
                     <span style="font-family: 微软雅黑; font-size: 18px; color: #6bbabe">
                            上架时间:&nbsp;&nbsp;&nbsp;
                     </span>
                    <input style="border-radius: 5px; border-width: 1px; width: 150px" id="minTime" min="1" type="date" name="minTime" >-<input style="border-radius: 5px; border-width: 1px; width: 150px" type="date" id="maxTime" min="1" name="maxTime" >
                </div>
            </div>
            <div class="col-12" style="margin-top: 10px">
                <div>
                    <span style="font-family: 微软雅黑; font-size: 18px; color: #6bbabe">
                            价格区间:&nbsp;&nbsp;&nbsp;
                    </span>
                    <input style="border-radius: 5px; border-width: 1px; width: 150px" type="number" id="minPrice" min="1" name="minPrice">-<input style="border-radius: 5px; border-width: 1px; width: 150px" id="maxPrice" min="1" type="number" name="maxPrice"> <button style="border-radius: 5px;background-color: white">查询</button>
                </div>
            </div>



        </div>
    </div>

</div>
<!-- Breadcrumb Area End -->

<!-- Shop Section Start -->
<div  class="section section-margin" style="background-color: pink;margin-top:0px;">

    <div class="container">
        <div class="row">
            <div class="col-12" >

                <!--                排序！！！！！！-->
                <div class="shop_toolbar_wrapper flex-column flex-md-row p-2 m-b-40 border">

                    <!-- 横竖切换 -->
                    <div class="shop-top-bar-left">

                        <div class="shop_toolbar_btn">
                            <button data-role="grid_4" type="button" class="active btn-grid-4" title="商品全览"><i class="ti-layout-grid4-alt"></i></button>
                            <button data-role="grid_list" type="button" class="btn-list" title="商品详情"><i class="ti-align-justify"></i></button>
                        </div>


                    </div>
                    <!-- 排序方式 -->
                    <div class="shop-top-bar-right">

                        <h4 class="title m-r-10">排序方式: </h4>

                        <div class="shop-short-by">
                            <select id="selectid" class="nice-select" aria-label=".form-select-sm example">
                                <option value="0">销量降序</option>
                                <option value="1">价格升序</option>
                                <option value="2">价格降序</option>
                                <option value="3">销量升序</option>
                                <option value="4">销量降序</option>
                            </select>
                        </div>
                    </div>
                    <!-- Shopt Top Bar Right Start -->



                </div>
                <!--shop toolbar end-->

                <!-- Shop Wrapper Start -->
                <div class="row shop_wrapper grid_4"  id="goodsVue" >


                    <!-- 单个商品 -->
                    <div class="col-xl-3 col-lg-4 col-md-4 col-sm-6 product"   v-for="good in goodsList" >
                        <div class="product-inner" >

                            <div class="thumb" >

<!--                                vue变量与字符串拼接-->
                                <a :href="'/goods/singleGoods?goodId='+good.goodsId+'&goodsTypeName='+good.goodsTypeName" target="_blank" class="image">
                                    <img class="fit-image" :src="'http://localhost:8080/uploadFile/product/'+good.cover" style="width: 300px;height: 300px" th:alt="Product" />
                                </a>

                            </div>

                            <div class="content">
                                <a :href="'/goods/singleGoods?goodId='+good.goodsId+'&goodsTypeName='+good.goodsTypeName" target="_blank">
                                    <h5  class="title">{{good.goodsName}}</h5>
                                </a>
                                <span class="price">
                                            <span class="new">{{good.salePrice}}</span>
                                    <span  class="old">{{good.originalPrice}}</span>
                                    </span>
                                <p>{{good.description}}</p>
                                <p  style="color:grey;">厂家：{{good.productAddress}}-{{good.productFactory}} </p>

                                <!-- Cart Button Start -->
                                <!-- Cart Button End -->
                            </div>
                            <!--                                                 竖着展示商品，刁德一批-->
                        </div>
                    </div>

                    <!-- 单个商品 End -->
                            <!--分页-->


                    <nav>
                    <ul  class="pagination" style="position:absolute ;left: 450px;">

                        <li class="page-item" style="position: relative;top: 10px;left: -10px;color: #0a53be">当前在第{{pageNum}}/{{pages}}页</li>

                        <p class="page-item">
                            <a class="page-link " @click="goPrePage()" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </p>
                        <li class="page-item" v-for="page in pages" :key="page"><a class="page-link"  @click="goPage(page)">{{page}}</a></li>

                        <p class="page-item" >
                            <a class="page-link " @click="goNextPage()" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </p>
                    </ul>
                </nav>


                </div>

                <!--                    商品展示结束！！！！！！！！！！！！！！！！-->

<!--                无用！！！！-->
                <div class="shop_toolbar_wrapper justify-content-center m-t-50" >

                </div>


            </div>
        </div>
    </div>
</div>
<!-- Shop Section End -->


<!-- Footer Top start -->
<footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>



<!--        商品图片上点加号弹出详细商品模态框！！！！-->



<!-- Scroll Top Start -->
<a th:href="@{#}" class="scroll-top show" id="scroll-top">
    <i class="arrow-top ti-angle-double-up"></i>
    <i class="arrow-bottom ti-angle-double-up"></i>
</a>
<!-- Scroll Top End -->

<!-- Mobile Menu Start -->
<div class="mobile-menu-wrapper">
    <div class="offcanvas-overlay"></div>


</div>


<script th:src="@{/assets/js/vendor.min.js}"></script>
<script th:src="@{/assets/js/plugins.min.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>

<!--引入VUE.js会产生冲突-->
<script type="text/javascript" th:src="@{/assets/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>

</body>


<script>


    var elementById1 = document.getElementById("goodsName");
    var elementById2 = document.getElementById("minTime");
    var elementById3 = document.getElementById("maxTime");
    var elementById4 = document.getElementById("minPrice");
    var elementById5 = document.getElementById("maxPrice");
    var elementById6 = document.getElementById("goodtype");
    var elementById = document.getElementById("selectid");
    var firstId = document.getElementById("firstid");
    var secondId = document.getElementById("secondid");

    elementById1.addEventListener('change',function () {
        goodsVues.$data.goodsName=elementById1.value
    })
    elementById2.addEventListener('change',function () {
        goodsVues.$data.minTime=elementById2.value
    })
    elementById3.addEventListener('change',function () {
        goodsVues.$data.maxTime=elementById3.value
    })
    elementById4.addEventListener('change',function () {
        goodsVues.$data.minPrice=elementById4.value
    })
    elementById5.addEventListener('change',function () {
        goodsVues.$data.maxPrice=elementById5.value
    })
    elementById6.addEventListener('change',function () {
        goodsVues.$data.brandName=elementById6.value
    })


    firstId.addEventListener('change',function () {
        goodsVues.$data.productTypeName=firstId.value

        // goodsVues.$data.productTypeName=firstId.value
    })

    secondId.addEventListener('change',function () {
        goodsVues.$data.goodsTypeName=secondId.value
    })

    elementById.addEventListener('change',function () {
        goodsVues.$data.selectId=elementById.value
    })

    let goodsVues =new Vue({
        el:"#goodsVue",
        data:{
            goods:{},
            goodsList:[],
            pages:1,
            pageNum:1,
            productTypeName:null,
            goodsTypeName:null,
            goodsName:null,
            brandName:null,
            minTime:null,
            maxTime:null,
            minPrice:0,
            maxPrice:0,
            selectId:0,
            nextPage:1,
            total:0,
            goodsId:null,
            prePage:1

        },
        created(){
            // this.findGoodType()
            this.search()

        },
        methods:{
            goPrePage(){
                this.pageNum = this.prePage
                this.search()
            },
            goNextPage(){
                if (this.pageNum!=this.pages){
                    this.pageNum = this.nextPage
                    this.search()
                }
            },
            goPage(page){
                this.pageNum = page
                this.search()
            },
            search(){
                let url="/goods/findGoods"
                axios.get(url,{
                    params:{
                        pageNum:this.pageNum,
                        productTypeName:this.productTypeName,
                        goodsTypeName:this.goodsTypeName,
                        goodsName:this.goodsName,
                        brandName:this.brandName,
                        minTime:this.minTime,
                        maxTime:this.maxTime,
                        minPrice:this.minPrice,
                        maxPrice:this.maxPrice,
                        selectId:this.selectId,
                    }
                }).then((data)=>{
                    this.goodsList=data.data.data.list;
                    this.nextPage=data.data.data.nextPage;
                    this.pages=data.data.data.pages
                    this.pageNum=data.data.data.pageNum
                    this.total=data.data.data.total
                    this.goodsId=data.data.data.goodsId
                    this.prePage=data.data.data.prePage;

                })
            }



        },watch:{
            selectId:{
                //a为新值 b为旧值
                handler(a ,b){
                    this.search();
                }
            },brandName:{
                handler(a,b){
                    this.search()
                }
             },goodsTypeName:{
                handler(a,b){
                    this.search()
                }
             },
            productTypeName:{
                handler(a,b){
                    this.search()
                }
            },goodsName:{
                handler(a,b){
                    this.search()
                }
            },minTime:{
                handler(a,b){
                    this.search()
                }
            },maxTime:{
                handler(a,b){
                    this.search()
                }
            },minPrice:{
                handler(a,b){
                    this.search()
                }
            },maxPrice:{
                handler(a,b){
                    this.search()
                }
            }
        }
    })



</script>

<script type="text/javascript">




</script>



</html>